<template>
<div class="base64-upload">
  <input type="file" accept="image/*" @change="onChange" id="uploadInput" />
  <mt-button class="is-round" type="primary" plain @click.native="triggerUpload">上传二维码</mt-button>
</div>
</template>

<script>
export default {
  props: {
    // imageSrc: String,
    // imageStyle: Object
  },
  data() {
    return {
      src: this.imageSrc
    }
  },
  methods: {
    triggerUpload(){
      window.document.querySelector('#uploadInput').click()
    },
    onChange(event) {
      if (event.target.files && event.target.files[0]) {
        let file = event.target.files[0]
        let reader = new FileReader()

        reader.addEventListener('load', e => {
          this.src = e.target.result
          let [, base64] = this.src.split(',')
          this.$emit('change', {
            size: file.size,
            type: file.type,
            name: file.name,
            base64: base64
          })
          event.target.value = ''
        })
        reader.readAsDataURL(file)
      }
    }
  }
}
</script>

<style scoped>
.base64-upload {
  position: relative;
}
.is-round{
  height: 34px;
  line-height: 34px;
}
input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
</style>
